import React, { Component } from 'react';
import Taro from '@tarojs/taro';
import {AtIcon} from "taro-ui";
import {Block, View, Image, ScrollView, Text} from '@tarojs/components';
import {gotoPage} from "../../../../utils/tools";
import Float from '../../../../components/float/float';
import {TARO_ENV} from "../../../../constants/api";
import CountDown from "../../../../components/count-down/count-down-seckill";
import '../seckill/index.scss';

const outSaleImg = "https://resource.ivcheng.com/upload/images/20221110/1668046531350_363.png";

interface IProps {
  data: any
  isUser: any
}

export default class SeckillActive extends Component<IProps> {

  viewDetail(item) {
    if(item.seckill_stock > 0) {
      gotoPage(item.url);
    }
  }

  render() {
    let {data}: any = this.props;
    data = data || {};
    data.color = data.color || "#fff";
    return (
      <View className={`seckill seckill-active ${TARO_ENV + 'seckill'}`}>
        <View className={`seckill-title ${TARO_ENV + 'seckill-title'}`}>
          <View className='seckill-title-left'>
            <Image src={data.titleIcon} className='imageStyle' />
            { data.name }
          </View>
          {
            data.status && data.status.indexOf("已结束") < 0 &&
            <View className='seckill-time'>
              {data.status === "即将开始" && <View className='count-down-wrap'>
                <View className='time-tips'>{data.status === "即将开始" ? '距开始还有' : '距结束还有'}</View>
                <CountDown time={data[data.status === "即将开始" ? 'begin_date' : 'end_date'] || 0} />
              </View>}
            </View>
          }
          <View className='ret' onClick={() => gotoPage(data.moreUrl + `?id=${data.seckill_id}`)}>
            更多
            <AtIcon value='chevron-right' size='16' color='#666' customStyle='line-height: inherit;' />
          </View>
        </View>
        <ScrollView enable-flex scrollX className='scroll-view'>
          <View className='seckill-block'>
            {
              data && data.data && data.data.map((item, index) => (
                <View className={index == 0? 'm-l-0 seckill-block-item': 'seckill-block-item'} key={index}>
                  <View className='scroll-item' onClick={() => this.viewDetail(item)}>
                    <View className='seckill-block-item-image'>
                      <Image src={item.main_img || item.img} className='img' mode='aspectFill' />
                      {
                        item.seckill_stock <= 0 &&
                        <Block>
                          <View className='seckill-img-mask'></View>
                          <Image src={outSaleImg} className='img outsaleimg' mode='aspectFit' />
                        </Block>
                      }
                    </View>
                    <View className='seckill-block-item-price'>
                      <View className='true-price font-family-price'>
                        <Text className='font-family-price symbol'>￥</Text>
                        <Float value={item.seckill_price} />
                      </View>
                      <View className='seckill-price-sign'>秒杀价</View>
                      <View className='price-right font-family-price'>￥{item.market_price || 0}</View>
                    </View>
                    <View className='seckill-block-item-title' style='-webkit-box-orient: vertical;'>
                      {item.name}
                    </View>
                    <View className='seckill-block-item-detail' style='-webkit-box-orient: vertical;'>
                     {item.seckil_short_name || ""}
                    </View>
                  </View>
                </View>
              ))
            }
          </View>
        </ScrollView>
      </View>
    )
  }
}
